<template>
    <div style="margin-left: 10px; width: 1200px;">
        <div style="width: 500px;">
            人员名称: <el-input v-model="name" placeholder="请输入内容" style="width: 300px;"></el-input>&nbsp;
            <el-button type="primary" @click="gettellList()">查询</el-button>
        </div>
        <br>
        <template>
            <el-table :data="staffList" border style="width: 80%">
                <el-table-column prop="id" label="编号">
                </el-table-column>
                <el-table-column prop="staffName" label="人员名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" @click="assignRoles(scope.row.id)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <br>
        <el-dialog title="分配角色" :visible.sync="dialogTableVisible">
            <template>

                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="role" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="index in roles" :label="index.id" :key="index.id">{{ index.roleName }}</el-checkbox>
                </el-checkbox-group>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add()">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getstaffsapi, getsrolesapi, addStaffRoleapi,getRoleByIdapi } from "@/api/systemSet/staff";
export default {
    data() {
        return {
            // 员工列表
            staffList: [],
            // 对话框表格可见性
            dialogTableVisible: false,
            // 角色列表
            roles: [],
            // 角色
            role: [],
            // 检查角色
            checkRole: [],
            // 表单
            form: {
                // 员工ID
                staffID: '',
                // 角色ID
                roleID: ''
            },
            name:""
        }
    },
    methods: {
        //获取员工列表
        getStaffList() {
            getstaffsapi().then(res => {
                this.staffList = res.data.data;
            });
        },
        //分配角色
        assignRoles(id) {
            this.dialogTableVisible = true;
            this.getRoleById(id);
            this.getRoleList();
            this.form.staffID = id;
            console.log(this.form.staffID);
        },
        //获取角色列表
        getRoleList() {

            let myparams = {
                name: "",
            };
            getsrolesapi(myparams).then(
                (res) => {
                    this.roles = res.data.data;
                    //console.log(res.data.data);
                },
                (err) => {
                    console.error(err);
                }
            );

        },
        //改变选中状态
        handleCheckedCitiesChange(value) {
            this.checkRole = value;
            console.log(this.checkRole);
        },
        //添加
        add() {
            //人员批量分配角色
            var parms = {
                staffID: this.form.staffID,
                roleID: this.checkRole.join(',')
            }
            addStaffRoleapi(parms).then(res => {

                console.log(res);
                if (res.data.data == true) {
                    this.$message({
                        message: '分配成功',
                        type: 'success'
                    });
                    this.dialogTableVisible = false;
                }
                else {
                    this.$message({
                        message: '分配失败',
                        type: 'error'
                    });
                }
            });

        },
        getRoleById(id) {
            //根据员工ID获取员工角色
            var parms = {
                id: id
            }
            getRoleByIdapi(parms).then(res => {
                this.role = res.data;
                console.log(this.checkRole);
            });
        },
    },
    created() {
        // 调用getStaffList()函数获取员工列表
        this.getStaffList();
    }
}
</script>

<style></style>